﻿﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath() + "/";
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>开始朗读</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style2/d_common.css">
<link rel="stylesheet" href="css/style2/common3.css">
</head>
<body>
	<div id="back">
		<div class="header">
			<div class="logo">
				<a href="javascript:void(0);"><img src="img/n_logo.png" alt="">&nbsp;
				</a>
			</div>
			<div class="user">
				<img
					src="${user.pic==null?'img/man.png':user.pic==''?'img/man.png':user.pic }"
					alt="">
				<div class="admin">
					<span class="name">${user.name }</span><span class="number">【${user.cardno }】</span>
				</div>
				<a class="tuichu" href="declaimer/endread?devicecode=${devicecode}&guid=${user.guid}" style="background:#25c0f6;display: inline-block;padding: 5px;height: 30px;line-height: 30px;border-radius:5px;width: 80px;text-align: center;">退出</a>
			</div>
		</div>
		<!--end header-->
		<div class="main main-read">
			<div class="part-noVideo ">
				<div class="time fl" style="position: absolute;color: #fff;z-index: 1;background: #0303037a;">
					<p><span id="minute">00</span>:<span id="second">00</span></p>
				</div>
				<div class="type pictype">
					<img src="css/style2/img/literature.png" alt=""><br> <span>朗读素材</span>
				</div>
				<div class="video part-Video hide">
					<div id="vd"></div>
				</div>
				<div class="artical">
					<div class="articalTitle">
						<p>${material.title }</p>
					</div>
					<div class="articalMain">
						<marquee id="marquee" direction="up" 
							behavior="scroll"  scrollamount="2" height='300px' onmouseover="this.stop();"
							onmouseout="this.start();">
							<h3 style="color:#000;">${material.title }</h3>
							<p style="color:#000;">${material.content }</p>
							<h3 style="color:#000;">${material.title }</h3>
							<p style="color:#000;">${material.content }</p>
						</marquee>
							
					</div>
					<div style="text-align: center;padding-top: 3px;">
					<a style="font-size:24px;position:relative;right:0;width: 130px;padding-left: 30px;
					background: url(css/style2/img/re-select.png) 8px 14px no-repeat;" 
					href="declaimer/material?cardno=${user.cardno }&guid=${user.guid}&code=${material.materialtype }&devicecode=${devicecode}"
								class="speed-btn">重选素材</a>
					</div>
				</div>
			</div>

			<div class="clear"></div>
			<div class="part-bottom">
				<div class="audio-play fr">
					<div id="player">
						<span>选择背景音乐：</span>
						<div class="ctrl">
							<div class="control clear">
								<div class="fl">
									<div class="rewind icon"></div>
									<div class="playback icon"></div>
									<div class="fastforward icon"></div>
								</div>
								<div class="volume fr">
									<div class="mute icon fl"></div>
									<div class="slider fr">
										<div class="pace"></div>
									</div>
								</div>
							</div>
							<div class="progress">
								<div class="slider">
									<div class="loaded"></div>
									<div class="pace"></div>
								</div>
								<div class="left" style="margin-top: 8px;"><span class="timer">0:00</span>
								<span class="alltime" style="float:right;font-size: 16px;color: #ccc;">0:00</span></div>
								<div class="right">
									<div class="repeat icon"></div>
									<div class="shuffle icon"></div>
								</div>
							</div>
						</div>
					</div>
					<ul id="playlist" class="fl"></ul>
				</div>
			</div>
			<div class="clear"></div>

		</div>
		<!--end back-->
	</div>
	<div class="footer">
		<div class="read-btn">
			<a  class="start-btn">开始</a> <a
				 class="over-btn">结束</a>
		</div>
	</div>
	<script src="js/video/jquery-2.1.4.min.js"></script>
	<script src="js/layer/layer.js"></script>
	<script src="js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/video/adapter-latest.js"></script>
	<script type="text/javascript" src="js/video/audio.js"></script>
	<script>
      var i = 600;
      Timeout();
      
		function Timeout() {
			if (i > 0) {
				i--;
				setTimeout(function() {
					Timeout();
				}, 1000);
			} else {
				setEncoderState(1,5);
			}
		}

		var list = "[" + "${list}" + "]";//.split(";")
		var plist = eval(list);

		//打开自动播放
		var height = $('.artical').height();
		var p = 0;
		$('.nBtn').click(function() {
			if (height > 400 * (p + 1)) {
				p++;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});
		$('.pBtn').click(function() {
			if (p > 0) {
				p--;
				$('.artical').css('top', (-390 * p) + 'px');
			}
		});
		 getMedia(1);  //获取音频
		var isread = false;
		$('.start-btn').click(function() {
			if ('${user.cardno}' == undefined
					|| '${user.cardno}' == '') {
				layer.msg("超时退出，请重新刷卡登录！",{icon : 0,time : 3000},
					function() {
						window.location.href = '<%=basePath%>declaimer/first?devicecode=${devicecode}&guid=${user.guid}';
				});
				return;
			}
			if(isread){
				return;
			}
	        $.ajax({
	          async : false,
	          cache : false,
	          type : 'post',
	          dataType : "json",
	          url :  'declaimer/readtype?type=1&cardno=${user.cardno}&guid=${user.guid}&materialid=${material.id }&devicecode=${devicecode }',// 请求的action路径
	          error : function(XMLHttpRequest, textStatus, errorThrown) {
	            layer.msg("请求失败！");
	          },
	          success : function(data) {
	            if(data.state=="1"){
	              record();     //开始录制
	              seconds = data.message;
	              setLastTime();
	              layer.msg("朗读开始！",{icon:1});
	              $(".start-btn").hide();
	              isread = true;
	              i = 1000;
	            }else{
	              layer.msg(data.message,{icon:0});
	            }
	          }
	        });
      });
		var seconds = 0;
		function setLastTime(){
			var second = seconds%60;
			var minute = (seconds-second)/60;
			if(minute<10)
				$("#minute").html("0"+minute);
			else
				$("#minute").html(minute);
			if(second<10)
				$("#second").html("0"+second);
			else
				$("#second").html(second);
			if(seconds>0){
				seconds--;
				setTimeout(function() { 
					setLastTime();
				},1000);
			}else{
				setEncoderState(1,5);
			}
		}
      
		$(".over-btn").click(function() {
			if (isread) {
				setEncoderState(1,5);
			} else {
				layer.confirm('是否退出朗读？', {
					btn : [ '确定', '取消' ]
				//按钮
				}, function() {
					setEncoderState(0,5);
				}, function() {
				});
			}
		});
		$(".video").hide();
		$(".pictype").show();
		
		//停止录制 status 0-无朗读记录，1-有朗读记录 
		function setEncoderState(status,state) {
			if(status=="1"){
				stopRecord();//https://139.224.17.20/school/camera/upload
				setTimeout("upload('<%=basePath%>declaimer/uploadfile?guid=${user.guid}&devicecode=${devicecode }&cardno=${user.cardno}','audioFile')",2000);
				
			}
			if (state == 5) {
				setTimeout('window.location.href = \'<%=basePath%>declaimer/endread2?guid=${user.guid}&devicecode=${devicecode }\';',3000);
			}
		}

		//设置字幕速度
		var speed = $("marquee").attr("scrollamount");
		function changeSpeed(val) {
			var marquee = $('marquee').html();
			setTimeout(
					function() {
						if (val > 0) {
							speed++;
							if (speed > 6) {
								speed = 6;
							}
							$("marquee").attr("scrollamount", speed).html(
									marquee);
							//回流DOM 重新添加marquee内容
							$(".articalMain")
									.html(
											'<marquee id="marquee" scrollamount="'
													+ speed
													+ '"  height="300px" direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>')
						} else {
							speed--;
							if (speed < 0) {
								speed = 1;
							}
							$("marquee").attr("scrollamount", speed)
							$(".articalMain")
									.html(
											'<marquee id="marquee" scrollamount="'
													+ speed
													+ '"  height="300px"  direction="up"onmouseover=this.stop() onmouseout=this.start()>'
													+ marquee + '</marquee>');
						}
					}, 200);
		}
		
		
		function stopbtn(obj){
			if($(obj).attr("class")=="speed-btn stop-btn"){
				$(obj).removeClass("stop-btn");
				$(obj).addClass("stop-btn2");
				document.getElementById('marquee').stop();
			}else{
				$(obj).removeClass("stop-btn2");
				$(obj).addClass("stop-btn");
				document.getElementById('marquee').start();
			}
			
		};
		change('<%=basePath%>declaimer/materialinfo?id=${material.id }');
		   function change(url) {  
			    android.change(url);
			}
	</script>
	<script src="js/script.js"></script>
</body>
</html>